<template>
  <el-date-picker style="width: 100%" v-model="date" value-format="yyyy-MM-dd" type="daterange" align="right"
                  unlink-panels @change="changeTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                  :picker-options="pickerOptions">
  </el-date-picker>
</template>

<script>

import utils from '@/utils/utils.js'
export default {
  props: ["beginDate", 'endDate'],
  data() {
    return {
      pickerOptions: { //时间快捷选择
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }],
      },
      date: [],
      query: {
        endDate: '',
        beginDate: '',
      },
    }
  },
  created() {
    // if(!utils.isNull(this.beginDate)&&!utils.isNull(this.endDate)){
    //    this.date.push(this.beginDate)
    //    this.date.push(this.endDate)
    // }
  },

  watch: {
    beginDate: {//深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        // this.date.push(val)
        this.date[0] = val
        console.log(this.date,"4444444444444444444444")
      },
      immediate: true,
      deep: true //true 深度监听
    },
    endDate: {//深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        // this.date.push(val)
        this.date[1] = val
        this.data= ['2022-01-10',]
      },
      immediate: true,
      deep: true //true 深度监听
    }
  },
  methods: {

    changeTime(data) {
      if (!utils.isNull(data)) {
        if (data.length > 1) {
          this.query.beginDate = data[0]
          this.query.endDate = data[1]
        }
      } else {
        this.query.beginDate = ''
        this.query.endDate = ''
      }
      this.$emit('queryDateClick', this.query)
    },
  }
}
</script>

<style>
</style>
